<template>
	<div class="modal-box" v-show="modelShow">
		<div class="modal-info">
			<image src="@/static/img/loadmore.png" mode="aspectFill" class="loadmore-img animate-radius" v-if="type == 'loading'"></image>
			<image src="@/static/img/tips.png" mode="aspectFill" class="loadmore-img" v-else></image>
			<span class="pet-font-fff">{{ msg }}</span>
			<span class="back-text" @tap="onBack" v-show="backShow">返回</span>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				backShow: false,
				modelShow: false,
				msg: '111',
				type: ''
			}
		},
		methods: {
			onBack(){
				this.$emit('loadingBack');
				console.log(11411)
				this.modelShow = false;
			},
			open(obj){
				this.modelShow = true;
				if(obj){
					console.log('254646',obj)
					this.init(obj)
					if(obj.type == 'loading'){
						setTimeout(()=>{
							this.backShow = true;
						},4000)
					}else{
						this.backShow = true;
					}
				}
			},
			init(that = this){
				this.msg = that.msg;
				this.type = that.type
			},
			close() {
				this.modelShow = false;
			}
		},
		mounted() {
			
		}
	}
</script>

<style lang="scss">
	.pet-font-fff{
		font-weight: 500;
		font-size: 5.33vw;
		color: #fff;
		margin-top: 4.27vw;
		text-align: center;
	}
	.back-text{
		font-size: 3.2vw;
		font-weight: 300;
		color: #FFCE80;
		margin-top: 1.07vw;
	}
	.animate-radius {
		display: block;
		animation: rotate 3s linear infinite;
	}
	
	@keyframes rotate {
		0% {
			transform: rotateZ(0deg);
		}
	
		100% {
			transform: rotateZ(360deg);
		}
	}
	.modal-box{
		z-index: 99999;
		background-color: rgba(0, 0, 0, 0.6);
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		padding: 0 8.53vw;
	
		
		.modal-info{
			padding: 10.67vw 4.27vw 9.87vw 4.27vw;
			width: 100%;
			background-color: #1B1B1B;
			display: flex;
			flex-direction: column;
			align-items: center;
			border-radius: 6.4vw;
			
			.loadmore-img{
				width: 18.13vw;
				height: 18.13vw;
			}
		}
		
		
	}
</style>